<template>
  <div style="height:100%">
    <div style="height:100%">
      <div style="color:#fff;font-size:1.6rem;margin-bottom:1%">单位发放统计</div>
      <div class="diyScoll" style="overflow-x:scroll;overflow-y: hidden">
        <div style="width:300%;height:90%;margin:0 auto">
          <Echart :echartObj="echartObj" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrgWageStatistics } from '@/api/wageStatistics'
import { mapGetters } from 'vuex'

import echarts from 'echarts'
import Echart from '@/components/echarts/index.vue'
export default {
  components: {
    Echart
  },
  data() {
    return {
      echartObj: {}
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.getData()
  },
  methods: {
    //获取数据
    getData() {
      getOrgWageStatistics({ projectId: this.userInfo.projectId }).then((res) => {
        let data = res.data.data.orgWageStatisticsVOList
        this.$store.commit('SET_WAGEPAY', {
          personTotal: res.data.data.personTotal,
          recordTotal: res.data.data.recordTotal,
          wageTotal: res.data.data.wageTotal
        })

        let tenderCode = []
        let lastMonthWage = []
        let wageTotal = []
        let max=0
        data.forEach((res) => {
          if (max<res.wageTotal/10000) {
            max=res.wageTotal/10000
          }
          tenderCode.push(res.tenderCode)
          lastMonthWage.push((res.lastMonthWage/10000).toFixed(2))
          wageTotal.push((res.wageTotal/10000).toFixed(2))
        })
        // console.log(max);
        
        this.echartObj = {
          color: ['#E7CF56', '#58F9F4'],

          legend: {
            left: '5%',
            data: ['累计发放金额（万元）', '上月发放金额（万元）'],
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: tenderCode,
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              },
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              },
              // interval: (Math.round(max*100/ 5)/100).toFixed(2)  ,
              interval: Math.round(max)/5 ,
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            }
          ],
          series: [
            {
              name: '累计发放金额（万元）',
              type: 'line',
              // stack: '总量',
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(231,207,86,0.7)' },
                    { offset: 0.5, color: 'rgba(231,207,86,0.5)' },
                    { offset: 1, color: 'rgba(49,96,109,0.1)' }
                  ])
                }
              },
              data: wageTotal
            },
            {
              name: '上月发放金额（万元）',
              type: 'line',
              // stack: '总量',
              areaStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: 'rgba(88,249,244,0.7)' },
                    { offset: 0.5, color: 'rgba(88,249,244,0.5)' },
                    { offset: 1, color: 'rgba(49,96,109,0.1)' }
                  ])
                }
              },

              area: true,

              data: lastMonthWage
            }
          ]
        }
      })
    }
  }
}
</script>

<style scoped>
.diyScoll {
  width: 100%;
  height: 90%;
}
.diyScoll::-webkit-scrollbar {
  width: 0.7rem;
  height: 0.7rem;
  /**/
}
.diyScoll::-webkit-scrollbar-track {
  background: #eee;

  border-radius: 0.35rem;
}
.diyScoll::-webkit-scrollbar-thumb {
  background: rgba(0, 246, 255);
  width: 1rem;
  border-radius: 0.35rem;
}
</style>